<script setup lang="ts">
/*
1:定义pinia内的模块处理
   state/actions处理
2：回到页面调用actions
3:处理数据类型
4：存储数据
5：使用面包屑组件渲染面包屑

路由
  router  导入  useRouter
           router=useRouter()
  route   导入  useRoute
           route=useRoute()
*/
import { useStore } from '@/store'
import { useRoute, onBeforeRouteLeave } from 'vue-router'
import { watch, onBeforeUnmount, watchEffect, onUnmounted } from 'vue'
import router from '@/router'
/*
watch:侦听器，
作用：某个值需要是响应式数据的change事件
定义
  const stop=watch(需要侦听的值,(newVal,oldVal)=>{},{
    immediate:定义时就立马执行回调
    deep:深度侦听
    flush:
       pre:默认值，渲染前执行回调
       post:渲染后执行
       sync:修改一次执行一次回调，且都是在渲染前执行
  })
  stop:停止侦听的方法
  需要侦听的值：
      基本数据类型：()=>基本数据类型
      复杂数据类型：直接写

*/

const { category } = useStore()
const route = useRoute()
// const stop = watch(
//   () => route.params.id,
//   newVal => {
//     // 强行定义只在一级分类执行
//     // if (route.path === '/category/' + newVal) {
//     category.category(newVal as string)
//     // }
//   },
//   {
//     immediate: true
//   }
// )
/*
watchEffect  了解
作用：类似于计算属性，但是它并不是产生新的值，依赖的值变化了，它立马会执行回调函数,定义时就立马执行回调函数
使用：
  watchEffect(()=>{
   category.category(route.params.id as string)
  })
*/

// watchEffect(() => {
//   // 内部使用的所有数据只要有响应式变化 它都会立马执行
//   if (route.path === '/category/' + route.params.id) {
//     category.category(route.params.id as string)
//   }
// })
category.category(route.params.id as string)
console.log('setup')
onBeforeRouteLeave(() => {
  // 路由离开前停止侦听
  // stop()
  console.log('onBeforeRouteLeave')
})
onBeforeUnmount(() => {
  console.log('一级分类', 'onBeforeUnmount')
})
onUnmounted(() => {
  console.log('一级分类', 'onUnmounted')
})
// onBeforeRouteUpdate(() => {
//   setTimeout(() => {
//     category.category(route.params.id as string)
//   }, 100)
// })
</script>
<template>
  <div class="top-category">
    <div class="container">
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem>{{ category.categoryInfo.name }}</XtxBreadItem>
      </XtxBread>
    </div>
  </div>
</template>
<style></style>
